<template>
  <div class="rankings">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <!-- 大学排名 -->
      <el-tab-pane label="大学排名" name="first">
        <div class="select-box" style="align-items: center">
          <!-- 搜索 -->
          <div class="search df">
            <el-input
              v-model="searchVal"
              style="width: 240px"
              placeholder="请输入学科名称"
              @input="searchKeyInput"
              @focus="isShowSearchPop = true"
              @blur="isShowSearchPop = false"
            />
            <el-button type="primary" @click="seachSchool">查询</el-button>
          </div>
          <div v-if="changeSchool.length > 0">
            <el-checkbox-group
              v-model="checked3"
              @change="changeCheckboxSchool"
            >
              <el-checkbox
                v-for="(item, index) in changeSchool"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div
          v-show="isShowSearchPop && searchList.length > 0"
          class="search-popover"
        >
          <div
            v-for="(item, index) in searchList"
            @mousedown.native="onClickSearchItem(item, index)"
          >
            <div style="padding: 5px 0">
              {{ item.cnName }}
            </div>
            <div
              v-if="index + 1 < searchList.length"
              style="width: 100%; height: 1px; background-color: #eee"
            ></div>
          </div>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="cnName" label="院校及招生方向" width="700">
            <template #default="scope">
              <span>{{ scope.row.cnName }}</span>
              <br />
              <span
                v-for="(item, index) in scope.row.features"
                style="
                  font-size: 12px;
                  font-weight: 400;
                  color: var(--text-placeholder-color);
                  margin-right: 5px;
                "
                >{{ item }}</span
              >
            </template>
          </el-table-column>
          <!-- 易度排名 -->
          <el-table-column prop="rankingOfEdu" label="易度排名">
            <template #header>
              <div
                style="display: flex; align-items: center; cursor: pointer"
                :class="{ active: activeColumn === 'rankingOfEdu' }"
                @click="setActiveColumn('rankingOfEdu')"
              >
                <span>易度排名</span>
                <el-icon size="16" style="margin-left: 3px">
                  <Bottom />
                </el-icon>
              </div>
            </template>
          </el-table-column>

          <!-- 校友会 -->
          <el-table-column prop="rankingOfXYH" label="校友会">
            <template #header>
              <div
                style="display: flex; align-items: center; cursor: pointer"
                :class="{ active: activeColumn === 'rankingOfXYH' }"
                @click="setActiveColumn('rankingOfXYH')"
              >
                <span>校友会</span>
                <el-icon size="16" style="margin-left: 3px">
                  <Bottom />
                </el-icon>
              </div>
            </template>
          </el-table-column>

          <!-- 软科 -->
          <el-table-column prop="rankingOfRK" label="软科">
            <template #header>
              <div
                style="display: flex; align-items: center; cursor: pointer"
                :class="{ active: activeColumn === 'rankingOfRK' }"
                @click="setActiveColumn('rankingOfRK')"
              >
                <span>软科</span>
                <el-icon size="16" style="margin-left: 3px">
                  <Bottom />
                </el-icon>
              </div>
            </template>
          </el-table-column>

          <!-- QS -->
          <el-table-column prop="rankingOfQS" label="QS">
            <template #header>
              <div
                style="display: flex; align-items: center; cursor: pointer"
                :class="{ active: activeColumn === 'rankingOfQS' }"
                @click="setActiveColumn('rankingOfQS')"
              >
                <span>QS</span>
                <el-icon size="16" style="margin-left: 3px">
                  <Bottom />
                </el-icon>
              </div>
            </template>
          </el-table-column>

          <!-- USNews -->
          <el-table-column prop="rankingOfUSNews" label="USNews">
            <template #header>
              <div
                style="display: flex; align-items: center; cursor: pointer"
                :class="{ active: activeColumn === 'rankingOfUSNews' }"
                @click="setActiveColumn('rankingOfUSNews')"
              >
                <span>USNews</span>
                <el-icon size="16" style="margin-left: 3px">
                  <Bottom />
                </el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="right" style="margin-top: 20px">
          <el-pagination
            v-model:current-page="pageData.page"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="getSchoolScorelineList"
          />
        </div>
      </el-tab-pane>

      <!-- 学科评估 -->
      <el-tab-pane label="学科评估" name="second">
        <div class="select-box" style="align-items: center">
          <el-button
            class="searchButton"
            @click="searchButton(1)"
            :plain="toSubjectSearch"
            :type="toSubjectSearch ? 'primary' : ''"
            >按学科查</el-button
          >
          <el-button
            class="searchButton"
            @click="searchButton(2)"
            :plain="toCollegeSearch"
            :type="toCollegeSearch ? 'primary' : ''"
            >按院校查</el-button
          >

          <!-- 省份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="roundChange(provinceVal)"
            v-model="roundVal"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in roundValList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <!-- 搜索 -->
          <div class="search df">
            <el-input
              v-model="searchVal"
              style="width: 240px"
              :placeholder="
                toSubjectSearch ? '请输入学科名称' : '请输入学校名称'
              "
              clearable
            />
            <el-button type="primary" @click="getList(searchVal)"
              >查询</el-button
            >
          </div>
        </div>
      </el-tab-pane>

      <!-- 双一流学科 -->
      <el-tab-pane label="双一流学科" name="third">
        <div class="select-box" style="align-items: center">
          <el-button
            class="searchButton"
            @click="searchButton(1)"
            :plain="toSubjectSearch"
            :type="toSubjectSearch ? 'primary' : ''"
            >按学科查</el-button
          >
          <el-button
            class="searchButton"
            @click="searchButton(2)"
            :plain="toCollegeSearch"
            :type="toCollegeSearch ? 'primary' : ''"
            >按院校查</el-button
          >

          <el-button
            class="searchButton"
            @click="searchButton(3)"
            :plain="toSecondRoundSearch"
            :type="toSecondRoundSearch ? 'primary' : ''"
            >第二轮</el-button
          >
          <el-button
            class="searchButton"
            @click="searchButton(4)"
            :plain="toFirstRoundSearch"
            :type="toFirstRoundSearch ? 'primary' : ''"
            >第一轮</el-button
          >
          <!-- 搜索 -->
          <div class="search df">
            <el-input
              v-model="searchVal"
              style="width: 240px"
              :placeholder="
                toSubjectSearch ? '请输入学科名称' : '请输入学校名称'
              "
              clearable
            />
            <el-button type="primary" @click="getList(searchVal)"
              >查询</el-button
            >
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { searchSchool } from '@/api/appv2/appv1.js';
import _ from 'lodash';
// import { nextTick, ref, watch } from 'vue';
const activeName = ref('first');

const searchVal = ref(''); // 搜索值

const toSubjectSearch = ref(true); // 按学科查
const toCollegeSearch = ref(false); // 按院校查

const toSecondRoundSearch = ref(true); // 第二轮
const toFirstRoundSearch = ref(false); // 第二轮

const isShowSearchPop = ref(false); // 是否显示搜索pop

const roundVal = ref('4'); // 轮次默认值
const roundValList = ref([
  {
    value: '4',
    label: '第四轮',
  },
  {
    value: '3',
    label: '第三轮',
  },
  {
    value: '2',
    label: '第二轮',
  },
  {
    value: '1',
    label: '第一轮',
  },
]);
const activeColumn = ref('rankingOfEdu');
const pageData = reactive({
  page: 1,
  pageSize: 10,
  ssearch: '',
});
const total = ref(0);
const tableData = ref([]);
const checked3 = ref([]);
const searchList = ref([]);
const changeSchool = ref([]);
function roundChange(val) {
  console.log('val:', val);
}
//大学排名
const universityRankings = () => {
  searchSchool(pageData)
    .then((res) => {
      if (res.code == 20000) {
        tableData.value = res.data;
        total.value = Number(res.total);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
universityRankings();
const getSchoolScorelineList = (e) => {
  pageData.page = e;
  universityRankings();
};
// 学校搜索
const seachSchool = () => {
  pageData.ssearch = searchVal.value;
  universityRankings();
};
const setActiveColumn = (e) => {
  activeColumn.value = e;
  pageData.sort = e;
  pageData.orderBy = 'asc';
  universityRankings();
};
const onClickSearchItem = (e) => {
  const isDuplicate = changeSchool.value.some((item) => item.id === e.code);

  // 如果没有重复，则添加新学校
  if (!isDuplicate) {
    changeSchool.value.push({
      name: e.cnName,
      id: e.code,
    });
  }
  checked3.value.push(e.code);

  // 清空搜索值
  searchVal.value = '';
  pageData.scode = checked3.value.join(',');
  // 调用大学排名的函数
  universityRankings();
};
const changeCheckboxSchool = (e) => {
  emit('changeCheck', e);
  if (e && e.length > 0) {
    // 将选中的学校ID用逗号隔开
    pageData.scode = e.join(',');
    // 调用大学排名的函数
    universityRankings();
  } else {
    pageData.scode = '';
    universityRankings();
  }
};
// 搜索输入值改变
const searchKeyInput = _.throttle((val) => {
  if (val.length >= 2) {
    searchSchool({
      search: val,
      pageSize: 1000,
      studentId: localStorage.getItem('student_id'),
    }).then((res) => {
      searchList.value = res.data;

      searchList.value.splice(0, 0, searchVal.value);
      isShowSearchPop.value = true;
    });
  } else {
    searchList.value = [];
    isShowSearchPop.value = false;
  }
}, 800);
// 点击切换查询按钮
function searchButton(val) {
  if (val == 1) {
    toSubjectSearch.value = true;
    toCollegeSearch.value = false;
  } else if (val == 2) {
    toCollegeSearch.value = true;
    toSubjectSearch.value = false;
  } else if (val == 3) {
    toSecondRoundSearch.value = true;
    toFirstRoundSearch.value = false;
  } else if (val == 4) {
    toFirstRoundSearch.value = true;
    toSecondRoundSearch.value = false;
  }
}

const handleClick = (tab) => {
  if (tab) {
    if (tab.props.label == '大学排名') {
    } else if (tab.props.label == '学科评估') {
    } else if (tab.props.label == '双一流学科') {
    }
  } else {
    if (activeName.value == 'first') {
    } else if (activeName.value == 'second') {
    } else if (activeName.value == 'third') {
    }
  }
};
function setActiveName(val) {
  activeName.value = val || 'first';
  handleClick();
}

defineExpose({
  setActiveName,
});
</script>

<style lang="scss" scoped>
.select-box {
  display: flex;
  flex-direction: row;
  padding: 20px 0;
  top: 120px;
  z-index: 100;
  background-color: #fff;
}
.search {
  margin: 0 10px;
}
.active {
  color: #409eff; /* 改变颜色，选中时显示蓝色 */
}

.search-popover {
  position: absolute;
  top: 55px;
  left: 0;
  width: 240px;
  height: 200px;
  overflow: auto;
  background-color: white;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border-bottom: 1px solid #c9cdd4;
  padding: 0 10px;
  font-size: 14px;
}
</style>
